<template>
  <view class="login-container">
    <form class="login-form">
      <h2>登录页面</h2>
      <input type="text" placeholder="请输入账号" v-model="param.username">
      <input type="password" placeholder="请输入密码" v-model="param.password">
      <button type="submit" @click="login">登录</button>
      <p style="margin-top: 20rpx;">没有账号? <text class="link" @click="goToRegister">点击注册</text></p>
    </form>
  </view>
</template>

<script>
import { userLogin } from '../../api/user/index.js'
export default {
  data() {
    return {
      param: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      if (this.param.password == "" || this.param.username == "") {
        uni.showToast({
          title: '账号密码不能为空!',
          //将值设置为 success 或者直接不用写icon这个参数
          icon: 'error',
          //显示持续时间为 2秒
          duration: 2000
        })
        return
      }
	  userLogin(this.param).then( res => {
		  if(res.code == 200){
			  uni.setStorage({
			  	key: 'userinfo',
				data: JSON.stringify(res.data)
			  })
			  uni.showToast({
			    title: '登录成功',
			    //将值设置为 success 或者直接不用写icon这个参数
			    icon: 'success',
			    //显示持续时间为 2秒
			    duration: 2000
			  })
			  uni.switchTab({
			    url: '/pages/index/index'
			  })
		  }
		  console.log(res)
	  })
    },
    goToRegister() {
      uni.redirectTo({
        url: '/pages/register/index'
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  background-image: linear-gradient(0deg, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);
}

.login-form {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 20px 50px;
  border-radius: 10px;
  width: 55%;
}

.login-form h2 {
  margin-bottom: 20px;
}

.login-form input {
  width: 90%;
  padding: 10px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgb(185, 185, 185);
}

.login-form button {
  background-color: #FF9800;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: 50%;
}


.link {
  color: #007bff;
  cursor: pointer;
}
</style>